import React from "react";
import { View, Text } from "react-native";
import ModalDropdown from "react-native-modal-dropdown";

export default class TelSelect extends React.Component {
  defaultProps = {
    data: []
  };

  state = {
    index: null
  };

  render() {
    const data = this.props.data.map(item => `${item.fullname}(+${item.code})`);
    const defaultIndex = this.props.data.findIndex(item => item.code == 86);
    const value = data[defaultIndex];
    const index = this.state.index || defaultIndex;

    return (
      <View
        style={{
          width: 55,
          height: 45,
          alignItems: "center",
          lineHeight: 45
        }}
      >
        <Text
          style={{
            fontSize: 12,
            width: 55,
            height: 45,
            textAlign: "center",
            lineHeight: 45
          }}
        >
          +{this.props.data.length > 0 ? this.props.data[index].code : null}
        </Text>
        <ModalDropdown
          defaultIndex={defaultIndex}
          defaultValue={value}
          options={data}
          {...this.props}
          style={{
            position: "absolute",
            top: 15,
            width: 55,
            height: 30,
            opacity: 0
          }}
          onSelect={index => {
            if (this.props.onSelect) {
              this.props.onSelect(this.props.data[index]);
            }
            this.setState({
              index: index
            });
          }}
          dropdownStyle={{
            width: "60%",
            marginTop: 15,
            backgroundColor: "#f0f0f0",
            borderRadius: 8,
            overflow: "hidden"
          }}
          dropdownTextStyle={{
            backgroundColor: "#f0f0f0",
            borderWidth: 0,
            borderRadius: 8,
            overflow: "hidden"
          }}
          dropdownTextHighlightStyle={{
            backgroundColor: "#fff"
          }}
        />
      </View>
    );
  }
}
